<template>
  <div>
    <div class="a">
      <h4>实时总览</h4>

      <tr class="b">
        <td>
          <div>
            <p>访客数</p>
            <h2>{{ zongren }}</h2>
            <p class="c">
              <span>昨日</span>
              <span>288</span>
            </p>
            <p class="c">
              <span>移动端占比</span>
              <span>88.8%</span>
            </p>
          </div>
        </td>

        <td>
          <div>
            <p>浏览量</p>
            <h2>470</h2>
            <p class="c">
              <span>昨日</span>
              <span>300</span>
            </p>
            <p class="c">
              <span>移动端占比</span>
              <span>79.8%</span>
            </p>
          </div>
        </td>

        <td>
          <div>
            <p>支付订单数</p>
            <h2>156</h2>
            <p class="c">
              <span>昨日</span>
              <span>80</span>
            </p>
            <p class="c">
              <span>移动端占比</span>
              <span>88.8%</span>
            </p>
          </div>
        </td>

        <td>
          <div>
            <p>支付卖家数</p>
            <h2>121</h2>
            <p class="c">
              <span>昨日</span>
              <span>100</span>
            </p>
            <p class="c">
              <span>移动端占比</span>
              <span>88.8%</span>
            </p>
          </div>
        </td>
      </tr>
    </div>
    <div>
      <div class="cc">
        <div>
          <zhutu></zhutu>
        </div>
        <div>
          <div>
            <xiantu></xiantu>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="jinri"></div>
    </div>
  </div>
</template>

<script>
import Zhutu from "@/components/Zhutu";
import Xiantu from "@/components/Xiantu";
export default {
  components: { Zhutu, Xiantu },
  data() {
    return {
      zongren: "",
      renAry: [],
    };
  },
  methods: {
    suiji() {
      let tDate = this.$moment();
      //当前整点时间
      let ren = tDate.format("H");
      console.log("ren", ren);
      let renAry = [];

      //随机生成
      let jiaDe = 0;
      console.log(jiaDe);

      //当前时间累积总人数与每个整点人数
      let zong = 0;
      for (let i = 0; i < ren; i++) {
        jiaDe = parseInt(Math.random() * 100);
        this.renAry.push(jiaDe);

        zong += jiaDe;
      }
      this.zongren = zong;
    },
    jin() {
      let chartDom = document.querySelector(".jinri");
      let myChart = this.$echarts.init(chartDom);

      let tDate = this.$moment();

      let d = this.$moment()
        .locale("zh")
        .hour(0)
        .minute(0)
        .second(0)
        .format("H");
      // prettier-ignore
      let dataAxis = [];
      //时间
      for (let i = 0; i < 25; i++) {
        if (i < 10) {
          dataAxis.push(`0${i}:00`);
        } else {
          dataAxis.push(`${i}:00`);
        }
      }
      //整点人数
      // let ren = tDate.format("H");
      // console.log("ren", ren);
      // let renAry = [];

      // let jiaDe = parseInt(Math.random() * 100);
      // console.log(jiaDe);
      // for (let i = 0; i < ren; i++) {
      //   renAry.push(jiaDe);
      // }
      // prettier-ignore
      // let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220,30];
      let data =this.renAry;
      let yMax = 500;
      let dataShadow = [];
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }
      let option = {
        title: {
          text: "今日访客数",
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            color: "#fff",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#999",
          },
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: true,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },
            data: data,
          },
        ],
      };
      // Enable data zoom when user click bar.
      const zoomSize = 6;
      myChart.on("click", function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: "dataZoom",
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[
              Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
            ],
        });
      });

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.suiji();
    this.jin();
  },
};
</script>
<style scoped lang="scss">
.cc {
  display: flex;

  div {
    // border: 1px solid red;
  }
}

.a {
  margin-bottom: 20px;
  > h4 {
    margin: 10px;
  }

  > .b {
    display: flex;

    > td {
      flex: 1;
      border: 1px solid #ddd;

      > div {
        padding: 0 15px;

        > p {
          margin: 10px 0;
        }

        .c {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
}
.jinri {
  width: 100%;
  height: 500px;
}
</style>
